<nz-card [nzLoading]="loading" [nzTitle]="nzTitleTemplate" [nzExtra]="extraTemplate">
  <ng-template #nzTitleTemplate>
      <span>
          <i nz-icon type="share-alt"></i>
          {{'DictionaryItem' | localize}}
      </span>
  </ng-template>
  <ng-template #extraTemplate>
      <ng-container *ngIf="isGranted('Pages.DictionaryItem.Create')">
          <a (click)="addItem(null)">
              <i nz-icon type="plus"></i> 添加一级节点
          </a>
          <nz-divider nzType="vertical"></nz-divider>
      </ng-container>
      <a class="ml-sm">
          <i nz-icon type="reload" nz-tooltip [nzTitle]="l('Refresh')" (click)="reload()"></i>
      </a>
  </ng-template>
  <nz-spin [nzTip]="l('MovingWithThreeDot')" [nzSpinning]="draging">
      <nz-tree [(ngModel)]="_treeData" [nzShowExpand]="true" [nzDraggable]="true" (nzClick)="activeNode($event)"
          (nzDblClick)="openFolder($event)" (nzOnDragEnter)="dragEnter($event)" (nzOnDrop)="dragSaveData($event)"
          (nzOnDragEnd)="dragSaveData($event)">
          <ng-template #contextTemplate>
              <ul nz-menu nzInDropDown>
                  <li nz-menu-item (click)="editItem()" *ngIf="isGranted('Pages.DictionaryItem.Edit')">
                      <i nz-icon type="edit"></i>
                      {{'Edit' | localize}}
                  </li>
                  <li nz-menu-item (click)="addSubItem()" *ngIf="isGranted('Pages.DictionaryItem.Create')">
                      <i nz-icon type="file-add"></i>
                      添加子节点
                  </li>
                  <li nz-menu-item (click)="deleteItem()" *ngIf="isGranted('Pages.DictionaryItem.Delete')">
                      <i nz-icon type="delete"></i>
                      {{'Delete' | localize}}
                  </li>
              </ul>
          </ng-template>
          <ng-template #nzTreeTemplate let-node>
              <span class="custom-node" draggable="true" aria-grabbed="true" [class.active]="activedNode?.key===node.key">
                <span *ngIf="!node.isLeaf" [class.shine-animate]="node.origin.isLoading" (contextmenu)="createContextMenu($event,contextTemplate, node)">
                    <i nz-icon type="folder" *ngIf="!node.isExpanded" (click)="openFolder(node)" nz-tooltip [nzTitle]="node.origin.code"></i>
                    <i nz-icon type="folder-open" *ngIf="node.isExpanded" (click)="openFolder(node)" nz-tooltip [nzTitle]="node.origin.code"></i>
                    <span class="ou-title">{{node.title + '('+ node.origin.code +')'}}</span>
                </span>
                <span *ngIf="node.isLeaf" (contextmenu)="createContextMenu($event,contextTemplate, node)">
                    <i nz-icon class="file" nz-tooltip [nzTitle]="node.origin.code"></i>
                    <span class="ou-title">{{node.title + '('+ node.origin.code +')'}}</span>
                </span>
              </span>

          </ng-template>

      </nz-tree>
  </nz-spin>
  <div class="text-center" *ngIf="totalItemCount == 0">
      <no-data text="暂未添加数据字典数据"></no-data>
  </div>

</nz-card>
